var socket;
//当前显示页面类型
var showType="";
//计时进入空闲状态
var mytime = 0;
//车牌号
var car_no = "";
$(function () {
//	showFinish();
//	showRefueling();
//	//更新单价
//	$("#oil_price").html("6.62");
//	//更新升数
//	$("#oil_vol").html("32.26");
//	//更新金额
//	$("#oil_money").html("200");
//	showCheck();
//	showStop();
	showFree();
	//机器人工作完毕
//	showOver();
//	showAgain("parkTooLeft","请您把车辆往右侧挪动");
//	showWarning();
	//显示授权成功
//	showAuth("京A8437DJ");
	initSocket();
});

function initSocket(){
	if(typeof(WebSocket) == "undefined") {
		alert("您的浏览器不支持WebSocket");
	}
	try{
		
		//实现化WebSocket对象，指定要连接的服务器地址与端口
		socket = new WebSocket("ws://"+"192.168.0.118:9002");
//		socket = new WebSocket("ws://"+"127.0.0.1:8182");
		
		//打开事件
		socket.onopen = function() {
			console.log("Socket 已打开");
// 				alert("Socket 已打开");
		};
		//获得消息事件
		socket.onmessage = function(msg) {
			console.log(msg);
			if(mytime){
				clearInterval(mytime);
			}
			
			var data = msg.data;
			console.log(data);
			var info = JSON.parse(""+data);
			console.log(info);
			var pageType = info.pageType;
			//停驻结果
			if(pageType == 'parkPage'){
				var parkInfo = info.parkInfo;
				//停驻信息
				if(parkInfo == "parkCorrect"){
					//位置正确
					showCheck();
					//语音提示
					voiceBroadcast("车辆已停放正确");
				}else{
					var text = "";
					if(parkInfo == "parkTooLeft"){
						text = "请您把车辆往右侧挪动";
					}else if(parkInfo == "parkTooRight"){
						text = "请您把车辆往左侧挪动";
					}else if(parkInfo == "parkTooHead"){
						text = "请您把车辆往后侧挪动";
					}else if(parkInfo == "parkTooBack"){
						text = "请您把车辆往前方挪动";
					}else if(parkInfo == "parkNoCar"){
						text = "未检测到车辆";
					}
					//位置不对,显示调整位置
					showAgain(parkInfo,text);
					upCarno(info.licensePlate);
					//语音提示
					voiceBroadcast(text);
				}
			}else if(pageType == 'oilStart'){
				console.log(showType);
				console.log(pageType);
				//开始加油
				if(showType != pageType){
					showAuth(info.licensePlate);
				}
				//更新油品
				$("#auth_type").html(info.oilType);
				//更新金额
				$("#auth_money").html(info.orderValue+"元");
				//语音提示
				var text = info.licensePlate + "您已预授权成功，授权金额"+info.orderValue+"元，"+info.oilType+"号油品，"+info.pumpId+"号枪"
				voiceBroadcast(text);
			}else if(pageType == 'oilReal'){
				console.log(showType);
				//加油实时记录
				if(showType != 'oilReal' ){
					showRefueling();
				}
				//更新油品
				$("#oil_type").html(info.oilType);
				//更新升数
				$("#oil_vol").html(info.oilLiter+"<span>升</span>");
				//更新金额
				$("#oil_money").html(info.money+"<span>元</span>");
				//更新单价
//				$("#oil_price").html(info.unitPrice);
			}else if(pageType == 'oilEnd'){
				//开始加油
				if(showType != pageType){
					showFinish();
				}
				//更新油品
				$("#order_type").html(info.oilType);
				//更新单价
				$("#order_price").html(info.unitPrice);
				//更新升数
				$("#order_vol").html(info.totalLiter+"升");
				//更新金额
				$("#order_money").html(info.totalMoney+"元");
				//语音播报
				voiceBroadcast("机器人正在关闭油箱盖，请您稍候");
			}else if(pageType == 'wxPay'){
				//微信支付结果
				if(info.result == 'SUCCESS'){
					//支付成功
					$("#finish_table").show();
					$('#finish_tip_a').html("付款成功！请确认安全后驶离");
					$('#finish_tip_b').html("Payment successful! Please make sure it's safe before leaving");
					//1分钟后复位
					doRecet();
				}
			}else if(pageType == 'invadePage'){
				//报警，区域入侵
				if(info.alarmValue == "invadeObj"){
					showWarning();
					//语音提示
					voiceBroadcast("您已进入机器人工作范围请离开工作区域!");
				}
			}else if(pageType == 'rebotStatueCheck'){
				//机器人运动结束
				if(info.rebotStatus == "Completed"){
					showOver();
					//语音提示
					voiceBroadcast("本次加油已完成，可以驶离加油位，欢迎您再次体验加油机器人!");
					doRecet();
				}
			}else {
				showFree();
			}
			showType = pageType;
			doResponse();
			return;
		};
		//关闭事件
		socket.onclose = function() {
			console.log("Socket已关闭");
			setTimeout(function (){
                initSocket(); //15秒重连socket
            }, 15000);
		};
		//发生了错误事件
		socket.onerror = function() {
			console.log("发生了错误");
		};
		socket.onbeforeunload = function() {
            websocket.close();
        };
	}catch (error) {
       console.log('connect error ');
    }
}

//复位
function doRecet(){
	mytime = setInterval(function(){ 
		//1分钟后，默认空闲，显示停车
		showFree(); 
		car_no = "";
		//更新车牌号
		upCarno(car_no);
		//更新升数
		$("#oil_vol").html("");
		//更新金额
		$("#oil_money").html("");
	}, 20000);
}

//socket回复
function doResponse(){
	socket.send('{"responseResult":"SUCCESS"}');
}
//车牌号赋值
function upCarno(car_no){
	$('#msg_car').html(car_no);
}

//显示空闲页面
function showFree(){
	$('#top_div').hide();
	$('#bottom_div').hide();
	$('#free_msg').show();
	$('#over_msg').hide();
	$('#dv_free').css('display','inline-block');
}

//显示完毕页面
function showOver(){
	$('#top_div').hide();
	$('#bottom_div').hide();
	$('#free_msg').hide();
	$('#over_msg').show();
	$('#dv_free').css('display','inline-block');
}

//显示停车页面
function showStop(){
	$('#top_div').removeClass();
	$('#top_div').addClass("top_line line_red");
	$('#bottom_div').removeClass();
	$('#bottom_div').addClass("bottom_line line_red");
	$('#msg_title').children().eq(0).removeClass();
	$('#msg_title').children().eq(0).addClass("msg_bg_red");
	$('#msg_font').html("请停车");
	$('#msg_font').removeClass();
	$('#msg_font').addClass("msg_font text_white");
	$('#msg_car').removeClass();
	$('#msg_car').addClass("msg_car text_white");
	$("#normal_msg").show();
	$("#wait_msg").hide();
	$("#finish_msg").hide();
	$("#refueling_msg").hide();
	$("#stop_show").show();
	$("#finish_show").hide();
	$("#wait_show").hide();
	$("#auth_show").hide();
	$("#again_show").hide();
	$("#warning_show").hide();
	showType = "";
	//更新升数
	$("#oil_vol").html("");
	//更新金额
	$("#oil_money").html("");
	
}
//显示完成加油
function showFinish(){
	$('#top_div').show();
	$('#bottom_div').show();
	$('#dv_free').hide();
	$('#dv_working').show();
	$('#top_div').removeClass();
	$('#top_div').addClass("top_line line_red");
	$('#bottom_div').removeClass();
	$('#bottom_div').addClass("bottom_line line_red");
	$('#msg_title').children().eq(0).removeClass();
	$('#msg_title').children().eq(0).addClass("msg_bg_red");
	$('#msg_font').html("请您稍后...");
	$('#msg_font').removeClass();
	$('#msg_font').addClass("msg_font text_white");
	$('#msg_car').html("机器人正在关闭油箱盖");
	$('#msg_car').removeClass();
	$('#msg_car').addClass("msg_car text_white");
	$("#finish_msg").hide();
	$("#normal_msg").hide();
	$("#wait_msg").hide();
	$("#refueling_msg").hide();
	$("#stop_show").hide();
	$("#auth_show").hide();
	$("#again_show").hide();
	$("#warning_show").hide();
	$("#finish_show").show();
	$("#wait_show").hide();
}
//显示确认加油
function showCheck(){
	$('#top_div').show();
	$('#bottom_div').show();
	$('#dv_free').hide();
	$('#dv_working').show();
	$('#top_div').removeClass();
	$('#top_div').addClass("top_line line_green");
	$('#bottom_div').removeClass();
	$('#bottom_div').addClass("bottom_line line_green");
	$('#msg_title').children().eq(0).removeClass();
	$('#msg_title').children().eq(0).addClass("msg_bg_green");
	$('#msg_font').html("车辆已停放正确");
	$('#msg_font').removeClass();
	$('#msg_font').addClass("msg_font text_black");
	$('#msg_car').removeClass();
	$('#msg_car').addClass("msg_car text_black");
	$("#normal_msg").hide();
	$("#wait_msg").show();
	$("#finish_msg").hide();
	$("#refueling_msg").hide();
	$("#stop_show").hide();
	$("#finish_show").hide();
	$("#auth_show").hide();
	$("#again_show").hide();
	$("#again_msg").hide();
	$("#warning_show").hide();
	$("#wait_show").show();
	$("#check_img").show();
	$("#refuel_img").hide();
}
//显示加油中
function showRefueling(){
	$('#top_div').show();
	$('#bottom_div').show();
	$('#dv_free').hide();
	$('#dv_working').show();
	$('#top_div').removeClass();
	$('#top_div').addClass("top_line line_red");
	$('#bottom_div').removeClass();
	$('#bottom_div').addClass("bottom_line line_red");
	$('#msg_title').children().eq(0).removeClass();
	$('#msg_title').children().eq(0).addClass("msg_bg_red");
	$('#msg_font').html("请勿进入其工作区域…");
	$('#msg_car').html("机器人加油中，请勿移动车辆");
	$('#msg_font').removeClass();
	$('#msg_font').addClass("msg_font text_black");
	$('#msg_car').removeClass();
	$('#msg_car').addClass("msg_car text_black");
	$("#normal_msg").hide();
	$("#again_msg").hide();
	$("#wait_msg").hide();
	$("#finish_msg").hide();
	$("#refueling_msg").show();
	$("#stop_show").hide();
	$("#finish_show").hide();
	$("#wait_show").show();
	$("#check_img").hide();
	$("#refuel_img").show();
	$("#auth_show").hide();
	$("#again_show").hide();
	$("#warning_show").hide();
}

//显示停车位不符
function showAgain(parkInfo,text){
	voiceBroadcast(text);
	$('#again_img').removeClass();
	if(parkInfo == "parkTooLeft"){
		text = "请您把车辆往<span style='color: #FF0000;'>右侧</span>挪动";
		$('#again_img').addClass("car_too_left");
	}else if(parkInfo == "parkTooRight"){
		text = "请您把车辆往<span style='color: #FF0000;'>左侧</span>挪动";
		$('#again_img').addClass("car_too_right");
	}else if(parkInfo == "parkTooHead"){
		text = "请您把车辆往<span style='color: #FF0000;'>后侧</span>挪动";
		$('#again_img').addClass("car_too_top");
	}else if(parkInfo == "parkTooBack"){
		text = "请您把车辆往<span style='color: #FF0000;'>前方</span>挪动";
		$('#again_img').addClass("car_too_bottom");
	}else if(parkInfo == "parkNoCar"){
		text = "<span style='color: #FF0000;'>未检测到车辆</span>";
	}
	$('#again_text').html(text);
	$('#top_div').show();
	$('#bottom_div').show();
	$('#bottom_div').show();
	$('#dv_free').hide();
	$('#dv_working').show();
	$('#top_div').removeClass();
	$('#top_div').addClass("top_line line_red");
	$('#bottom_div').removeClass();
	$('#bottom_div').addClass("bottom_line line_red");
	$('#msg_title').children().eq(0).removeClass();
	$('#msg_title').children().eq(0).addClass("msg_bg_red");
	$('#msg_font').html("请把车停在可扫描范围内");
	$('#msg_font').removeClass();
	$('#msg_font').addClass("msg_font text_white");
	$('#msg_car').removeClass();
	$('#msg_car').addClass("msg_car text_white");
//	$('#msg_car').html("");
	$("#again_msg").show();
	$("#normal_msg").hide();
	$("#wait_msg").hide();
	$("#finish_msg").hide();
	$("#refueling_msg").hide();
	$("#stop_show").hide();
	$("#finish_show").hide();
	$("#wait_show").hide();
	$("#auth_show").hide();
	$("#again_show").show();
	$("#warning_show").hide();
	$('#oil_table').show();
}


//显示停车位不符
function showAuth(carNo){
	$('#top_div').show();
	$('#bottom_div').show();
	$('#bottom_div').show();
	$('#dv_free').hide();
	$('#dv_working').show();
	$('#top_div').removeClass();
	$('#top_div').addClass("top_line line_yellow");
	$('#bottom_div').removeClass();
	$('#bottom_div').addClass("bottom_line line_yellow");
	$('#msg_title').children().eq(0).removeClass();
	$('#msg_title').children().eq(0).addClass("msg_bg_yellow");
	$('#msg_font').html("已授权成功");
	$('#msg_font').removeClass();
	$('#msg_font').addClass("msg_font text_black");
	$('#msg_car').removeClass();
	$('#msg_car').addClass("msg_car text_black");
	$('#msg_car').html("");
	$("#again_text").html("<span style = 'line-height: 12vw;font-size: 6vw;'>"+carNo+"已授权</span>");
	$("#auth_show").show();
	$("#again_msg").show();
	$("#normal_msg").hide();
	$("#wait_msg").hide();
	$("#finish_msg").hide();
	$("#refueling_msg").hide();
	$("#stop_show").hide();
	$("#finish_show").hide();
	$("#wait_show").hide();
	$("#again_show").hide();
	$("#warning_show").hide();
	$('#oil_table').show();
}


//2.10	报警,
function showWarning(){
	$('#top_div').show();
	$('#bottom_div').show();
	$('#bottom_div').show();
	$('#dv_free').hide();
	$('#dv_working').show();
	$('#top_div').removeClass();
	$('#top_div').addClass("top_line line_red");
	$('#bottom_div').removeClass();
	$('#bottom_div').addClass("bottom_line line_red");
	$('#msg_title').children().eq(0).removeClass();
	$('#msg_title').children().eq(0).addClass("msg_bg_red");
	$('#msg_font').html("您已进入机器人工作范围");
	$('#msg_font').removeClass();
	$('#msg_font').addClass("msg_font text_white");
	$('#msg_car').removeClass();
	$('#msg_car').addClass("msg_car text_white");
	$('#msg_car').html("请离开工作区域！  ");
	$("#again_msg").hide();
	$("#auth_show").hide();
	$("#normal_msg").hide();
	$("#wait_msg").hide();
	$("#finish_msg").hide();
	$("#refueling_msg").hide();
	$("#stop_show").hide();
	$("#finish_show").hide();
	$("#wait_show").hide();
	$("#again_show").hide();
	$("#warning_show").show();
	$('#oil_table').show();
}

//加油中实时油量变更
function oilInfoUp(vol,money){
	$('#oil_money').html(money);
	$('#oil_vol').html(vol);
}

//加油订单变更
function orderInfoUp(vol,money){
	$('#order_money').html(money);
	$('#order_vol').html(vol);
}

//语音播报
function voiceBroadcast(text){
//    var url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=" + encodeURI(text);        // baidu文字转语音
//    var voiceContent = new Audio(url);
//    voiceContent.src = url;
//    voiceContent.play();
//    var to_speak = window.speechSynthesis;
//    to_speak = new SpeechSynthesisUtterance("Hello world");
//    window.speechSynthesis.speak(to_speak);
    var mess = text
    	 
	var msg = new SpeechSynthesisUtterance(mess)
	 
	msg.volume = 100  // 声音的音量
	 
	msg.rate = 1.2 // 语速，数值，默认值是1，范围是0.1到10
	 
	msg.pitch = 2 // 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1
	 
	speechSynthesis.speak(msg)
};
